<template>
  <div class="information-container">
    <div class="headerphoto">
      <slot name="back" style="left: 0"></slot>
      <span class="photo">更换头像</span>
    </div>

    <div class="box">
      <!-- 图片，用来展示用户选择的头像 -->
      <img class="the_img" v-if="!this.avatar" src="" alt="" />
      <img class="the_img" v-else :src="this.avatar" alt="" />
      <!-- 按钮区域 -->
      <div class="btn-box">
        <input
          type="file"
          accept="image/*"
          style="display: none"
          ref="iptRef"
          @change="onFileChange"
        />
        <button class="change" type="primary" @click="chooseImg">
          选择图片
        </button>
        <button class="sure">确定上传</button>
      </div>
    </div>
  </div>
</template>

<script>
// import {getavatar,huanavatar} from '@/api/index1'
export default {
  name: "UserAvatar",
  data() {
    return {
      avatar: "",
    };
  },
  methods: {
    // 选择图片->点击事件->让选择框出现
    chooseImg() {
      // 模拟点击行为
      this.$refs.iptRef.click();
    },
    // 在选择框中选择图片后触发的改变事件
    onFileChange(e) {
      // 获取用户选择的文件列表（伪数组）
      const files = e.target.files;
      if (files.length === 0) {
        // 没有选择图片
        this.avatar = "";
      } else {
        // 选择了图片
        console.log(files[0]);
      }
    },
    //修改用户图片
    async gets() {
      const res = await getavatar();
      this.avatar = res.data;
    },
    //修改学生图片
    async gets1() {
      const res1 = await huanavatar({ studnetId });
      this.avatar1 = res1.data;
    },
  },
  onFileChange(e) {
    const files = e.target.files;
    if (files.length === 0) {
      this.avatar = "";
    } else {
      // 1. 创建 FileReader 对象
      const fr = new FileReader();
      // 2. 调用 readAsDataURL 函数，读取文件内容
      fr.readAsDataURL(files[0]);
      // 3. 监听 fr 的 onload 事件
      fr.onload = (e) => {
        // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
        this.avatar = e.target.result;
      };
    }
  },
  created() {
    this.gets();
    this.gets1();
  },
};
</script>

<style scoped>
/*整个盒子 */
.information-container {
  height: 43.75rem;
  display: flex;
  width: 100%;
  flex-direction: column;
  border: 1px solid rgba(245, 245, 245, 1);
}

/* 头部更换头像 */
.headerphoto {
  height: 3.75rem;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  border: 1px solid rgba(245, 245, 245, 1);
  width: 100%;
}
.box {
  margin-top: 6.25rem;
}
.photo {
  font-size: 1.5rem;
  margin-left: 350px;
}
.preview {
  object-fit: cover;
}
.the_img {
  width: 22.5rem;
  height: 22.5rem;
}
/*包两个盒子的按钮 */
.btn-box {
  margin-top: 1.25rem;
}
/*确定上传按钮 */
.sure {
  width: 7.5rem;
  height: 2.25rem;
  border-radius: 6%;
  margin-left: 7.5rem;
}

.el-button--primary {
  background-color: #fff;
  color: black;
}
/*选择图片按钮 */
.change {
  width: 7.5rem;
  height: 2.25rem;
  border-radius: 6%;
}
</style>  